<template>
  <view class="bluetodo">
    <view class="bluelist">
      <view class="big-circle">
        <view class="little-circle"> </view>
      </view>
      <view class="item">
        {{ item }}
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "BlueList",
  props:{
      item:String,
  },
  data(){
      return{};
  },
};
</script>

<style scoped>
.bluetodo{
 display: flex;
 justify-content: center;
 margin-top: 20rpx;
}
.bluelist {
    display: flex;
    align-items:center ;
  width: 680rpx;
  height: 120rpx;
  border-radius: 30rpx;
  background-color: rgb(77, 121, 240);
}
.big-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30rpx;
  margin-right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: gray;
}
.little-circle {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: white;
}
.item {
  line-height: 120rpx;
 font-family: Smiley Sans;
   color: white;
}
</style>